// pages/colorpad/colorpad.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    color:"#000000",
    bgcolor:"#ffffff",
    red:'0',
    green:'0',
    blue:'0',
    hexLabel:"使用十六进制格式的颜色值"
  },
  sliderChange:function(e){
    console.log(e)
    var rgb = e.target.dataset.val
    if(rgb === 'r'){
      this.setData({red:e.detail.value})
      this.color()
    }else if(rgb === 'g'){
      this.setData({green:e.detail.value})
      this.color()
    }else if(rgb === 'b'){
      this.setData({blue:e.detail.value})
      this.color()
    }
  },
  numBtn:function(e){
    var step = e.target.dataset.val
    if(step === 'r-1'){
      if(this.data.red <= 1){
        this.setData({red:0})
      }else{
        this.setData({red:this.data.red-1})
      }
    }else if(step === 'r+1'){
      if(this.data.red >= 254){
        this.setData({red:255})
      }else{
        this.setData({red:Number(this.data.red)+1})
      }
    }else if(step === 'g-1'){
      if(this.data.green <= 1){
        this.setData({green:0})
      }else{
        this.setData({green:this.data.green-1})
      }
    }else if(step === 'g+1'){
      if(this.data.green >= 254){
        this.setData({green:255})
      }else{
        this.setData({green:Number(this.data.green)+1})
      }
    }else if(step === 'b-1'){
      if(this.data.blue <= 1){
        this.setData({bgcolor:0})
      }else{
        this.setData({blue:this.data.blue-1})
      }
    }else if(step === 'b+1'){
      if(this.data.blue >= 254){
        this.setData({blue:255})
      }else{
        this.setData({blue:Number(this.data.blue)+1})
      }
    }
    this.setColor()
  },
  switchChange:function(e){
    if(e.detail.value){
      this.isHex = true
      this.setColor()
      this.setData({hexLabel:'使用十六进制格式的颜色值'})
    }else{
      this.isHex = false
      this.setColor()
      this.setData({hexLabel:'使用十进制格式的颜色值'})
    }
  },
  isHex: true,
  toHex:function(e){
    var str = ""
    if(num<16){
      str = "0"+num.toString(16)
    }else{
      str = num.toString(16)
    }
     return str
  },
  setColor:function(){
    var rr = this.data.red
    var gg = this.data.green
    var bb = this.data.blue
    var dark = (Number(rr)+Number(gg)+Number(bb))<383
    var str =""
    if(this.isHex){
      str = "#" + this.toHex(Number(rr))+ this.toHex(Number(gg)) + this.toHex(Number(bb))
      this.setData({color:str})
    }else{
      str = "rgb("+rr+","+gg+","+bb+")"
      this.setData({color:str})
    }
    if(dark){
      this.setData({bgcolor:"ffffff"})
    }else{
      this.setData({bgcolor:"#000000"})
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})